<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/Welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>数据报表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 视图 -->
    <el-card>
      <div id="main" style="width:600px;height:400px"></div>
    </el-card>
  </div>
</template>
<script>
import echarts from "echarts";
export default {
  data() {
    return {};
  },
  created() {},
  methods: {},
  //   执行到mounted时，页面元素已经渲染完毕
  mounted() {
      var myChart = echarts.init(document.getElementById('main'))
      var option = {
          title:{
              text:'入门实例'
          },
          tooltip:{},
          legend:{
              data:['销量']
          },
          xAxis:{
              data:['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子',]
          },
          yAxis:{},
          series:[
              {
                  name:'销量',
                  type:'bar',
                  data:[5,20,36,10,10,20]
              }
          ]
      }

    //   展示数据
    myChart.setOption(option)
  }
};
</script>
<style lang="less" scoped>
</style>